<script setup lang="ts">
import router from '@/router';
import { useQuestionStore } from '@/stores/question';
import { computed } from 'vue';

const store = useQuestionStore()

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const viewWidth = computed(() => {
  let windowWidth = window.innerWidth
  if(windowWidth < 1280) {
    return window.innerWidth * 0.6
  }else{
    return 300;
  }
})

const handleAgain = () => {
  store.questions.forEach((e) => {
    e.choice.clear()
  })
  router.push('/question')
}
</script>

<template>
  <el-col class="wrapper">
    <p class="title">恭喜！</p>
    <el-progress :width="viewWidth" type="dashboard" :percentage="store.correct / store.total * 100" :color="colors" />
    <el-row style="justify-content: center;">
        <el-button
        class="btn"
        type="primary"
        @click="handleAgain">再来一遍！</el-button>
        <el-button
        class="btn"
        type="primary"
        @click="() => {$router.push('/')}">换套题做！</el-button>
    </el-row>
  </el-col>
</template>

<style scoped>
  .title {
    font-size: 2rem;
    text-align: center;
  }
  .wrapper {
    text-align: center;
  }
</style>